import { useTranslation } from 'react-i18next';

import useScreenSize from '@/hooks/useScreenSize';

import styles from '../index.module.scss';

interface AuthSliderType {
  activeStatus: 'signIn' | 'signUp';
  switchActiveStatus: () => void;
}

const ActiveSlider: React.FC<AuthSliderType> = props => {
  const { activeStatus, switchActiveStatus } = props;
  const { t } = useTranslation();
  const { isMobile } = useScreenSize();

  const swingClass = () => {
    if (!isMobile) {
      return activeStatus === 'signUp' ? 'left-1/2' : ' left-0';
    } else {
      return activeStatus === 'signUp' ? 'top-[480px]' : ' top-0';
    }
  };

  return (
    <div className={`${styles.activeSlider} ${swingClass()}`}>
      <h1 className="text-3xl font-bold mb-5">
        {t(activeStatus === 'signIn' ? t('welcomeBack') : t('helloFriend'))}
      </h1>
      <button
        className="flex justify-center items-center w-32 h-8 text-white text-xs rounded-2xl border border-white"
        onClick={switchActiveStatus}
      >
        {t(activeStatus.toLocaleUpperCase())}
      </button>
    </div>
  );
};

export default ActiveSlider;
